<template>
  <div class="container">
    <div>坐标：</div>
    <div>X:{{x}}</div>
    <div>Y:{{y}}</div>
    <hr>
    <div>{{count}}</div>
    <button @click="add">累加1</button>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, toRefs, ref } from 'vue'

// 定义模块的方式,抽离代码
const userMouse = () => {
  const mouse = reactive({
    x: 0,
    y: 0
  })
  const move = (e) => {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  onMounted(() => {
    document.addEventListener('mousemove', move)
  })


  onUnmounted(() => {
    document.removeEventListener('mousemove', move)
  })
  return mouse
}

export default {
  name: 'App',
  setup () {
    const mouse = userMouse()
    // 简单数据类型， ref，代码分离
    const count = ref(0)
    const add = (() => {
      count.value++
    })

    // ...mouse展开后，reactive中的数据，就不在是响应式数据了
    // 需要使用toRefs转换成响应式数据对象
    return { ...toRefs(mouse), count, add }
  }
}
</script>

<style>
</style>